<template>
  <div class="container">
    <div style="width: 50%;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单池A</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd(1)">添加商户</el-button>
        </div>
        <div class="text item">
          <template>
            <el-table :data="tableData1" style="width: 100%" row-key="id" :tree-props="{ children: 'children' }" border>
              <el-table-column label="展开" width="60" />
              <el-table-column label="排序" width="80">
                <template slot-scope="scope">
                  <div v-if="!scope.row.isEdit">{{ scope.row.sort }}</div>
                  <div v-else>
                    <el-input v-model="scope.row.sort"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="shop_name" label="店铺名称" show-overflow-tooltip width="120"/>
              <el-table-column label="品类" width="80" show-overflow-tooltip prop="category" />
              <el-table-column prop="number" label="数量" width="80">
                <template slot-scope="scope">
                  <div v-if="!scope.row.isEdit || !scope.row.children">{{ scope.row.number }}</div>
                  <div v-else>
                    <el-input v-model="scope.row.number"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="is_show" label="状态" width="80">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.is_show == 1 ?'success':'danger'">{{ scope.row.is_show == 1 ? '启用' : '禁用' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.children" type="primary" @click="handleAddCate(scope.row.id)" size="mini">添加</el-button>
                  <el-button type="success" size="mini" @click="handleEdit(scope.row.id,scope.row)">{{ scope.row.isEdit ? '保存' : '编辑' }}</el-button>
                  <el-button :type="scope.row.is_show == 2?'success':'warning'" size="mini" @click="handleOpen(scope.row.id, scope.row, scope.row.is_show)">{{
                    scope.row.is_show == 2 ? '启用' : '禁用' }}</el-button>
                  <el-button v-if="!scope.row.children" type="danger" @click="handleDel(scope.row.id)" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <custom-page v-show="1!=1" ref="customPage" :total="total1" @getList="getList" />
        </div>
      </el-card>
    </div>
    <div style="width: 50%;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单池B</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd(2)">添加商户</el-button>
        </div>
        <div class="text item">
          <template>
            <el-table :data="tableData2" style="width: 100%" row-key="id" :tree-props="{ children: 'children' }" border>
              <el-table-column label="展开" width="60" />
              <el-table-column label="排序" width="80">
                <template slot-scope="scope">
                  <div v-if="!scope.row.isEdit">{{ scope.row.sort }}</div>
                  <div v-else>
                    <el-input v-model="scope.row.sort"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="shop_name" label="店铺名称" show-overflow-tooltip width="120"/>
              <el-table-column label="品类" width="80" show-overflow-tooltip prop="category" />
              <el-table-column prop="number" label="数量" width="80">
                <template slot-scope="scope">
                  <div v-if="!scope.row.isEdit || !scope.row.children">{{ scope.row.number }}</div>
                  <div v-else>
                    <el-input v-model="scope.row.number"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="is_show" label="状态" width="80">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.is_show == 1 ?'success':'danger'">{{ scope.row.is_show == 1 ? '启用' : '禁用' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.children" type="primary" @click="handleAddCate(scope.row.id)" size="mini">添加</el-button>
                  <el-button type="success" size="mini" @click="handleEdit(scope.row.id,scope.row)">{{ scope.row.isEdit ? '保存' : '编辑' }}</el-button>
                  <el-button :type="scope.row.is_show == 2?'success':'warning'" size="mini" @click="handleOpen(scope.row.id, scope.row, scope.row.is_show)">{{
                    scope.row.is_show == 2 ? '启用' : '禁用' }}</el-button>
                  <el-button v-if="!scope.row.children" type="danger" @click="handleDel(scope.row.id)" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-card>
      <add-supplier ref="addSupplier" :is-first="isFirst" :edit-item="editItem" @getList="getList" />
      <add-categroy ref="addCategroy" :edit-id="editId" @getList="getList"/>
    </div>
  </div>
</template>
  
<script>
import { supplierLists, editSupplierShow, editSupplierCategoryShow,editSupplierSort,editSupplierCategorySort,addSupplierCategory,delSupplierCategory } from '@/api/user'
import customPage from '@/components/customPage'
import { readonly } from 'vue'
import addSupplier from './components/addSupplier'
import addCategroy from './components/addCategroy'
export default {
  components: { customPage, addSupplier, addCategroy },
  // props: ['shopname'],
  props: {
    shopname: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchForm: {
        shopname: '',
        account_num: '',
        status: null
      },
      total1: 0,
      total2: 0,
      tableData1: [],
      tableData2: [],
      routerName: '',
      editItem: {},
      editId:'',
      isFirst:''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 添加品类
    handleAddCate(id){
      this.editId=id
      this.$refs.addCategroy.dialogVisible = true
    },
    // 编辑排序
    handleEdit(id,row) {
      if (row.isEdit) {
        this.$delete(row, 'isEdit')
        if (row.children != undefined) {
          // // 编辑供应商排序
          let params = {
            order_shop_id: id,
            sort:row.sort,
            number:row.number,
          }
          editSupplierSort(params).then(res => {
            this.getList()
          })
        } else {
          // 编辑品类排序
          let params = {
            category_id: id,
            sort:row.sort,
            number:row.number,
            category:row.category
          }
          editSupplierCategorySort(params).then(res => {
            this.getList()
          })
        }
      } else {
        this.$set(row, 'isEdit', true);
      }
    },
    // 删除品类列表
    handleDel(id){
      this.$confirm('是否确认删除品类?', '提示', {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消'
		})
		  .then(() => {
        delSupplierCategory(id).then(res=>{
        this.getList()
      })
		  })
		  .catch(() => { })
    },
    // 编辑供应商/品类是否显示
    handleOpen(id, item, status) {
      if (item.children != undefined) {
        // 编辑供应商是否显示
        let params = {
          order_shop_id: id,
          is_show: status == 1 ? 2 : 1,
        }
        
        editSupplierShow(params).then(res => {
          this.getList()
        })
      } else {
        console.log('else');
        // 编辑品类是否显示
        let params = {
          category_id: id,
          is_show: status == 1 ? 2 : 1
        }
        editSupplierCategoryShow(params).then(res => {
          this.getList()
        })
      }
    },
    // 添加商户
    handleAdd(id) {
      this.isFirst=id
      this.$refs.addSupplier.dialogVisible = true
      this.$refs.addSupplier.title = '添加商户'
    },
    // 修改
    handleClick(row) {
      if (row.isEdit) {
        this.$delete(row, 'isEdit')
        // 编辑

      } else {
        this.$set(row, 'isEdit', true)
      }
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        shopname: '',
        account_num: '',
        status: null
      }
      this.routerName = ''
      this.getList()
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      this.tableData1 = []
      this.tableData2 = []
      this.searchForm.shopname = this.searchForm.shopname || this.routerName
      supplierLists({ page, pageSize, ...this.searchForm }).then(res => {
        res.forEach(e => {
          if (e.is_first == 1) {
            this.tableData1.push(e)
          } else {
            this.tableData2.push(e)
          }
        });
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'supplierView') {
      next(vm => {
        vm.getList()
      })
    } else {
      next()
    }
  }
}
</script>
  
<style lang="scss" scoped>
.container {
  display: flex;
  gap: 30px;
}
</style>
  